<template>
  <el-card>
    <div slot="header" class="clearfix">
      <span>主体管理</span>
    </div>
    <v-tableBtns
      :show-export="false"
      :show-create="true"
      :table-title="exportTitle"
      :table-data="exportData"
      @addNew="addNew"
    />

    <v-table
      :table-title="tableTitle"
      :table-data="tableData"
      @del="del"
      @edit="edit"
    />
    <v-pagination
      :page-info="pageInfo"
      :get-table-list="getTableList"
    />

  </el-card>
</template>

<script>
import { mapGetters } from 'vuex'

export default {
  name: 'Home',
  data() {
    return {
      // f分页
      pageInfo: {
        pageNumber: 1,
        pageSize: 30,
        totalPage: 0,
        totalRow: 0
      },
      tableTitle: [
        {
          cn: 'id',
          en: 'id'
        },
        {
          cn: '公司名称',
          en: 'name'
        },
        {
          cn: 'logo',
          en: 'logo',
          type: 'img'
        },
        {
          cn: '创建时间',
          en: 'created_at'
        },
        {
          cn: '修改时间',
          en: 'updated_at'
        }
      ],
      tableData: [],

      exportTitle:[],
      exportData:[],

    }
  },
  created() {
    this.getTableList()
  },
  methods: {
    getTableList(data) {
      const loading = this.$loading()
        loading.close()
      this.$post('action/Companies/dataGrid', data)
        .then(res => {
          const list = res.data.list || []
          this.pageInfo.totalPage = res.data.totalPage
          this.pageInfo.totalRow = res.data.totalRow
          this.tableData = list
        })
    },

    addNew() {
      // 跳转到创建页面
      this.$router.push({
        name: 'company_manage.body.edit'
      })
    },
    edit(val) {
      this.$router.push({
        name: 'company_manage.body.edit',
        query: {
          id: val.row.id
        },
        params: {
          details: val.row
        }
      })
    },

    del(val) {
      const data = { id: val.row.id }
      this.$post('action/ReceivBank/del', data)
        .then(res => {
          this.$message({
            message: res.msg,
            type: 'success'
          })
        })
    },

    // 导出excel
    handleDownload() {
      this.downloadLoading = true
                import('@/vendor/Export2Excel').then(excel => {
                  const tHeader = this.tableTitle.map(item => item.cn)
                  const filterVal = this.tableTitle.map(item => item.en)
                  const list = this.tableData
                  const data = this.formatJson(filterVal, list)
                  excel.export_json_to_excel({
                    header: tHeader,
                    data,
                    filename: this.filename,
                    autoWidth: this.autoWidth,
                    bookType: this.bookType
                  })
                  this.downloadLoading = false
                })
    },
    formatJson(filterVal, jsonData) {
      return jsonData.map(v => filterVal.map(j => {
        return v[j]
      }))
    }

  },
  computed: {
    ...mapGetters([
      'name',
      'roles'
    ])
  }
}
</script>

<style rel="stylesheet/scss" lang="scss" scoped>

    .top-nav {
        padding: 0 55px 15px 0;
    }

    .line {
        text-align: center;
    }

    .grid-content {
        /*font-size: 20px;*/
        cursor: pointer;
        color: #45d1e1;
        .color {
            /*font-size: 20px;*/
            color: #45d1e1;
            font-weight: 600;
        }
    }

    .table-menu {
        /*padding-left: 30px;*/
        padding-bottom: 15px;
    }

    .block {
        padding-top: 15px;
    }
</style>

